<template>
  <div class="contioner">
    <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="query" layout="inline">
        <a-form-item label="日期" prop="beginDate">
          <a-date-picker  popup-container="html"  v-model="query.beginDate" :style="{ width: '180px' }" placeholder="选择开始日期" class="bacClass" />
        </a-form-item>
        <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
        <!-- <a-form-item label="厂区" prop="planOrderCode">
          <a-input allow-clear :style="{ width: '180px' }" class="bacClass" v-model="query.planOrderCode" />
        </a-form-item> -->
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button>
        </a-space>
      </div>
    </div>
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>

    <div style="background-color: #f0f2f5; height: 10px"></div>
    <a-tabs   :lazy-load="true" :justify="true" :default-active-key="1" @change="aTabsChanges">
      <a-tab-pane :key="1" title="单面机" style="width: 100%; height: 100%">
        <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
          <div style="width: 80%; height: 100%">
            <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
          </div>
          <div style="width: 20%; height: 100%">
              <AgGridVuesCopys :suppressCopyRowsToClipboard="true" rowSelection="multiple" :rowHeight="30" :headerHeight="30" @grid-ready="gridReady" style="height:100%" :defaultColDef="defaultColDef"
              class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc">
            </AgGridVuesCopys>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane :key="2" title="双面机" style="width: 100%; height: 100%">
        <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
          <div style="width: 80%; height: 100%">
            <div ref="myChart2" :style="{ width: '100%', height: '100%' }"></div>
          </div>
          <div style="width: 20%; height: 100%">
              <AgGridVuesCopys :suppressCopyRowsToClipboard="true" rowSelection="multiple" :rowHeight="30" :headerHeight="30" @grid-ready="gridReady" style="height:100%" :defaultColDef="defaultColDef"
              class='ag-theme-alpine' :rowData="tableDataList2" :columnDefs="tc">
            </AgGridVuesCopys>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane :key="3" title="罗纹机" style="width: 100%; height: 100%">
        <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
          <div style="width: 80%; height: 100%">
            <div ref="myChart3" :style="{ width: '100%', height: '100%' }"></div>
          </div>
          <div style="width: 20%; height: 100%">
              <AgGridVuesCopys :suppressCopyRowsToClipboard="true" rowSelection="multiple" :rowHeight="30" :headerHeight="30" @grid-ready="gridReady" style="height:100%" :defaultColDef="defaultColDef"
              class='ag-theme-alpine' :rowData="tableDataList3" :columnDefs="tc">
            </AgGridVuesCopys>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
  
<script lang="ts" setup>

import * as echarts from 'echarts'

import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
const emit = defineEmits(['takebiaoji'])
const headerShow = ref<boolean>(true)


const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
}

interface Querin {
  beginDate: any
  planOrderCode: string
}
//getlist初始化接口参数
let query = reactive<Querin>({
  beginDate: dayjs().format('YYYY-MM-DD'), //当天日期
  planOrderCode: '',
})

const tableDataList: any = ref([])
const tableDataList2: any = ref([])
const tableDataList3: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  flex:1
}

const tc = [
  {
    headerName: '机台号',
    field: 'machine',
    width: 100
  },
  {
    headerName: '当日',
    field: 'dayBigDecimal',
    width: 100
  },
  {
    headerName: '当月',
    field: 'mouthBigDecimal',
    width: 100
  },
]

const option = ref(
  {
    title: {
      text: '单面机运行效率'
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['当日', '当月']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      splitNumber: 10,
      axisLabel: {
        formatter: '{value} %'
      }
    },
    series: [
      {
        name: '当日',
        type: 'line',
        data: []
      },
      {
        name: '当月',
        type: 'line',
        data: []
      },
    ]
  }
)
const option2 = ref(
  {
    title: {
      text: '双面机运行效率'
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['当日', '当月']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [1,2,3,4,5,6,7,8,9,10]
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      splitNumber: 10,
      axisLabel: {
        formatter: '{value} %'
      }
    },
    series: [
      {
        name: '当日',
        type: 'line',
        data: []
      },
      {
        name: '当月',
        type: 'line',
        data: []
      },
    ]
  }
)
const option3 = ref(
  {
    title: {
      text: '罗纹机运行效率'
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['当日', '当月']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      splitNumber: 10,
      axisLabel: {
        formatter: '{value} %'
      }
    },
    series: [
      {
        name: '当日',
        type: 'line',
        data: []
      },
      {
        name: '当月',
        type: 'line',
        data: []
      },
    ]
  }
)

//初始化
onMounted(async () => {
  selectJt()
  selectJt2()
  selectJt3()
})
const myChart: any = ref()
const myChart2: any = ref()
const myChart3: any = ref()
const states = () => {
  return echarts.init(myChart.value!)
}
const states2 = () => {
  return echarts.init(myChart2.value!)
}
const states3 = () => {
  return echarts.init(myChart3.value!)
}

function selectJt() {
  post({
    url: 'qms/report/machineEfficiencyReport',
    data: {
      "firmId": query.planOrderCode, //公司ID
      "machineTypeName": "单面机", //机台类型
      "machineCode": "", //设备编号机器编号
      "date": query.beginDate //日期时间
    }
  }).then((res: any) => {
    if (res.code == 200) {
      tableDataList.value = res.data
      option.value.xAxis.data = res.data.map((o: any) => o.machine)
      console.log(option.value.xAxis.data)
      option.value.series[0].data = res.data.map((o: any) => o.dayBigDecimal)
      option.value.series[1].data = res.data.map((o: any) => o.mouthBigDecimal)
      const state = states()
      state.setOption(option.value)
    } else {
      Message.error(res.message)
    }
  })
}
function selectJt2() {
  post({
    url: 'qms/report/machineEfficiencyReport',
    data: {
      "firmId": query.planOrderCode, //公司ID
      "machineTypeName": "双面机", //机台类型
      "machineCode": "", //设备编号机器编号
      "date": query.beginDate //日期时间
    }
  }).then((res: any) => {
    if (res.code == 200) {
      tableDataList2.value = res.data
      option2.value.xAxis.data = res.data.map((o: any) => o.machine)
      console.log(option2.value.xAxis.data)
      option2.value.series[0].data = res.data.map((o: any) => o.dayBigDecimal)
      option2.value.series[1].data = res.data.map((o: any) => o.mouthBigDecimal)
      const state = states2()
      state.setOption(option2.value)
    } else {
      Message.error(res.message)
    }
  })
}
function selectJt3() {
  post({
    url: 'qms/report/machineEfficiencyReport',
    data: {
      "firmId": query.planOrderCode, //公司ID
      "machineTypeName": "罗纹机", //机台类型
      "machineCode": "", //设备编号机器编号
      "date": query.beginDate //日期时间
    }
  }).then((res: any) => {
    if (res.code == 200) {
      tableDataList3.value = res.data
      option3.value.xAxis.data = res.data.map((o: any) => o.machine)
      console.log(option3.value.xAxis.data)
      option3.value.series[0].data = res.data.map((o: any) => o.dayBigDecimal)
      option3.value.series[1].data = res.data.map((o: any) => o.mouthBigDecimal)
      const state = states3()
      state.setOption(option3.value)
    } else {
      Message.error(res.message)
    }
  })
}

const aTabsChanges = () => {

}

const getList = () => {
  selectJt()
  selectJt2()
  selectJt3()
}
</script>
<script lang="ts">
export default defineComponent({
  name: 'ClothWarehouseIntoStorage',
})
</script>
<style scoped>
.contioner {
  height: 100%;
  background: #fff;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>
  